import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import { AtSwitch } from 'taro-ui'
import http from '@/utils/http';
import utils from '@/utils/util';
import { get as getGlobalData, set as setGlobalData } from '@/global'
import './index.scss';

const app = Taro.getApp();
export default class MessageSetting extends Taro.Component {

    constructor(props) {
        super(props);
        this.state = {
            allSwitch: false,
            isOpen: false,
            wardArr: []
        }
    }
    componentWillMount() {
        let userInfo = getGlobalData('userInfo') || utils.getUserInfo();
        this.setState({
            userInfo: userInfo,
            allSwitch: !userInfo.isdrugstore,
            isOpen: !!userInfo.isdrugstore
        }, () => {
            this.getWardStatus();
        })
    }
    config = {
        navigationBarTitleText: '消息设置'
    }
    handleChange = (value, flag) => {
        let { wardArr, userInfo } = this.state;
        http.get('closeNode', {
            loginid: userInfo.loginid,
            isopen: value ? 0 : 1
        }).then((res) => {
            userInfo.isdrugstore = (value ? 0 : 1)
            setGlobalData('userInfo', userInfo);
            app.saveSync("userInfo", JSON.stringify(userInfo));
            utils.showtoast(res.msg);
            wardArr = wardArr.map((item) => {
                return {
                    ...item,
                    ischeck: 'nocleck'
                }
            })
            this.setState({
                allSwitch: value,
                wardArr: [...wardArr],
                isOpen: typeof(flag) === 'boolean' ?  flag:false
            },()=>{
                this.changTap();
            })
        }).catch((e) => {
            console.error(e);
        })
    }
    getWardStatus() {
        let { userInfo } = this.state;
        http.get('getWardStatus', {
            loginid: userInfo.loginid,
        }).then((res) => {
            this.setState({
                wardArr: [...res.datas]
            })
        }).catch((e) => {
            console.error(e);
        })
    }
    unwind() {
        let { isOpen, allSwitch} = this.state;
        this.setState({
            isOpen: !isOpen,
        },()=>{
            allSwitch && this.handleChange(false,this.state.isOpen);
        })
    }
    changTap(index, e) {
        e && e.stopPropagation();
        let { wardArr } = this.state;
        if (index!= undefined) {
            wardArr[index].ischeck = wardArr[index].ischeck === 'nocleck' ? 'check' : 'nocleck';
        }
        this.setState({
            wardArr: [...wardArr]
        }, () => {
            let { userInfo } = this.state;
            let wards = [];
            wardArr.map((item) => {
                console.log(item.ischeck)
                if (item.ischeck === 'check') {
                    wards.push(item.id)
                }
            })
            http.get('updateWardStatus', {
                loginid: userInfo.loginid,
                wards: wards.join('|')
            }).then((res) => {
                console.log(res);
            })
        })

    }
    render() {
        const { isOpen, wardArr } = this.state;
        return (
            <View className='message-setting ov_h'>
                <View className='mt-2-5 bg_fff pl-6 pt-2-5 pb-2-5 flex flex-r flex-item-between flex-item-v-center pr-2 de-btn' >
                    <View>
                        <View className='ft28' >消息提醒</View>
                        <View className='ft24 fc_B9C mt-1-5'>开启后，微信将向你推送消息通知</View>
                    </View>
                    <View>
                        <AtSwitch border={false} color='#4B81FF' checked={this.state.allSwitch} onChange={this.handleChange.bind(this)} />
                    </View>
                </View>
                <View className='ov_h tap-ov mt-2-5' style={{ height: isOpen ? Taro.pxTransform(123 + 94 * wardArr.length) : Taro.pxTransform(123) }} onClick={() => {
                    this.unwind()
                }}
                >
                    <View className={`bg_fff pl-6 flex flex-r flex-item-between flex-item-v-center pr-3 open-box de-btn ${isOpen ? 'line-b' : ''}`}>
                        <View>
                            <View className='ft28' >接收部分病区提醒</View>
                            <View className='ft24 fc_B9C mt-1-5'>选中部分，推送消息通知</View>
                        </View>
                        <View>
                            <Image className={`ml-0-5 icon ${isOpen ? 'active' : ''}`} style={{ width: Taro.pxTransform(12), height: Taro.pxTransform(22), opacity: 0.6 }} src={require('../../../assets/imgs/home/home_icon_pressed.png')} />
                        </View>
                    </View>
                    {
                        wardArr.map((item, index) => {
                            return (
                                <View key={item.wardid} className='bg_fff flex pr-2 pl-2-5 de-btn de-btn' onClick={this.changTap.bind(this, index)}>
                                    <View className='line-b open-item-box flex-1 flex flex-r flex-item-between flex-item-v-center'>
                                        <View className='ft28 pl-3-5'>{item.wardname}</View>
                                        <View>
                                            <Image style={{ width: Taro.pxTransform(36), height: Taro.pxTransform(36) }} src={item.ischeck === 'check' ? require('../../../assets/imgs/setting/xisz_icon_selected.png') : require('../../../assets/imgs/setting/xisz_icon_normal.png')} />
                                        </View>
                                    </View>
                                </View>
                            )
                        })
                    }
                </View>

            </View>

        );
    }
}
